<template>
  <div>
    <el-row>
      <el-col v-if="nameChangeAble&&!nameless" :span='rollAble?12:6'>
        <el-input :model-value="localName"
                  @input="(result)=>{if(nameAutoCommit){
                    this.commit(result,nameKeyStack)
                  }this.$emit('nameChange',result)}">
          <template #prepend v-if="rollAble">
            <el-button type="primary"
                       @click="this.$emit('roll')"
                       icon="compass"></el-button>
          </template>
        </el-input>
      </el-col>
      <el-col :span='(nameChangeAble&&!nameless)?(rollAble?12:18):24'>
        <el-input :placeholder="placeholder"
                  :readonly="!isKP"
                  :type="text?'textarea':''"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  :model-value="localValue"
                  @input="(result)=>{if(valueAutoCommit){
                    this.commit(result,valueKeyStack)
                  }this.$emit('valueChange',result)}">
          <template v-if="!nameChangeAble&&!nameless" #prepend>
            <template v-if="!rollAble">
              {{ localName }}:
            </template>
            <template v-else>
              <el-button type="primary" @click="this.$emit('roll')" icon="compass">{{ localName }}:</el-button>
            </template>
          </template>
          <template #append v-if="deletable">
            <el-button id="i-close" @mouseleave="()=>{this.reClick=false}" type="primary"
                       @click="()=>{
                         if(reClick===false){
                           this.reClick=true
                         }else {
                           this.reClick=false;
                           this.$emit('delete')
                         }}"
                       icon="closeBold"
            ></el-button>
          </template>
        </el-input>
      </el-col>
    </el-row>


  </div>
</template>
<script>
import {store} from "@/js/store";

export default {
  name: "DefaultBar",
  components: {},
  props: {
    name: String,
    nameKeyStack: Array,
    value: String | Number,
    valueKeyStack: Array,
    focusText: Boolean,
    deletable: Boolean,
    nameChangeAble: Boolean,
    nameless: Boolean,
    text: Boolean,
    disable: Boolean,
    placeholder: String,
    disableAutoCommit: Boolean
  },
  data() {
    return {
      reClick: false
    }
  },
  computed: {
    isKP() {
      return (store.getters.isKP && !this.disable)
    },
    rollAble() {
      return (!this.focusText) && (/^\d+$/.test(this.localValue))
    },
    localName() {
      if (this.nameKeyStack != null) {
        return store.getters.cardData(this.cardIndex, this.nameKeyStack)
      } else {
        return this.name
      }
    },
    localValue() {
      if (this.valueKeyStack != null) {
        return store.getters.cardData(this.cardIndex, this.valueKeyStack)
      } else {
        return this.value
      }
    },
    nameAutoCommit() {
      if (this.disableAutoCommit) {
        return false
      } else if (this.nameKeyStack != null) {
        return true
      }
    },
    valueAutoCommit() {
      if (this.disableAutoCommit) {
        return false
      } else if (this.valueKeyStack != null) {
        return true
      }
    },
    clicked(){
      return this.reClick?'#ff6b66':'inherit'
    }
  },
  inject: {
    cardIndex: {
      from: "cardIndex"
    },
  },
  mounted() {
  }, emits: {
    valueChange: null,
    nameChange: null,
    save: null,
    delete: null,
    roll: null
  }, methods: {
    commit(payload, keyStack) {
      store.commit('cardData', {data: payload, index: this.cardIndex, keyStack: [...keyStack]})
    }
  }
}
</script>

<style scoped>
:deep(el-input) {
  padding: 0;
}
:deep(#i-close){
  background-color: v-bind(clicked);
}
</style>
